import React, { useState, useEffect } from 'react'
import {
  Form,
  Input,
  Select,
  Button,
  Radio,
  Row,
  Col,
  Checkbox,
  DatePicker,
  Modal,
  Space,
  TreeSelect,
} from 'antd'
import { all } from '@/services/area/api'

const { Option } = Select

// import type { ProColumns } from '@ant-design/pro-table';
import { EditableProTable } from '@ant-design/pro-table'
import ProField from '@ant-design/pro-field'
import { ProFormRadio } from '@ant-design/pro-form'
import { values } from 'lodash'
// import ProCard from '@ant-design/pro-card';

const { RangePicker } = DatePicker

const waitTime = (time = 100) => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(true)
    }, time)
  })
}

const defaultData = []

const PriceInput = ({ value = [], onChange }) => {
  const [editableKeys, setEditableRowKeys] = useState([])
  const [dataSource, setDataSource] = useState([])
  const [myData, setMyData] = useState([])
  useEffect(() => {
    all({
      page: 1,
      pageSize: 10,
    }).then(data => {
      setMyData(data)
    })
  }, [])

  const { SHOW_PARENT } = TreeSelect

  const onChange1 = value => {
    console.log('onChange ', value)
    // this.setState({ value })
  }

  const filter = (inputValue, treeNode) => {
    return treeNode.title.indexOf(inputValue) != -1
  }

  const tProps = {
    treeData: myData,
    onChange: onChange1,
    treeCheckable: true,
    showCheckedStrategy: SHOW_PARENT,
    placeholder: '选择地区',
    style: {
      width: '100%',
    },
    treeNodeFilterProp: 'title',
    filterTreeNode: filter,
  }

  const columns = [
    {
      title: '区域范围',
      key: 'area_codes',
      dataIndex: 'area_codes',
      render: (text, record, _, action) => [
        <TreeSelect
          treeData={myData}
          value={text}
          showCheckedStrategy={SHOW_PARENT}
          treeCheckable={true}
          disabled
          bordered={false}
        />,
      ],
      renderFormItem: value => {
        return <TreeSelect {...tProps} />
      },
      formItemProps: (form, { rowIndex }) => {
        return {
          rules: rowIndex > 2 ? [{ required: true, message: '此项为必填项' }] : [],
        }
      },
      // 第二行不允许编辑
      // editable: (text, record, index) => {
      //   return index !== 0;
      // },
      width: '30%',
    },
    {
      title: '首件',
      key: 'first_piece',
      dataIndex: 'first_piece',
    },
    {
      title: '运费',
      key: 'first_fee',
      dataIndex: 'first_fee',
    },
    {
      title: '续件',
      key: 'continuous_piece',
      dataIndex: 'continuous_piece',
    },
    {
      title: '续费',
      key: 'continuous_fee',
      dataIndex: 'continuous_fee',
    },
    {
      title: '操作',
      valueType: 'option',
      width: 200,
      render: (text, record, _, action) => [
        <a
          key='editable'
          onClick={() => {
            action?.startEditable?.(record.id)
          }}
        >
          编辑
        </a>,
        <a
          key='delete'
          onClick={() => {
            setDataSource(dataSource.filter(item => item.id !== record.id))
          }}
        >
          删除
        </a>,
      ],
    },
  ]

  return (
    <>
      <EditableProTable
        rowKey='id'
        // headerTitle="可编辑表格"
        maxLength={5}
        recordCreatorProps={{
          onClick: () => {
          },
        }}
        columns={columns}
        request={async () => ({
          data: defaultData,
          total: 3,
          success: true,
        })}
        value={dataSource}
        onChange={setDataSource}
        editable={{
          type: 'multiple',
          editableKeys,
          onSave: async (rowKey, data, row) => {
            value.push(data)
            onChange(value)
            // await waitTime(500)
          },
          onChange: setEditableRowKeys,
        }}
      />
    </>
  )
}

export default PriceInput
